<!DOCTYPE html>
<html>
<head>
  <title>Three.js Starter - Circle Animation</title>
  <style>
    html { overflow: hidden; }
    body { margin: 0; padding: 0; overflow: hidden; }
    canvas { width: 100%; height: 100% }
  </style>
</head>
<body>
  <script src="three/three.min.js"></script>
  <script src="three/LegacyJSONLoader.js"></script>
  <script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
    camera.position.z = 5;
    var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    var clock = new THREE.Clock();
    var time = 0;
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    var aLight = new THREE.AmbientLight( 0x7f3900 );
    scene.add( aLight );

    var dLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
    dLight.position.set(1,1,1);
    scene.add( dLight );

    var dLight = new THREE.DirectionalLight( 0xffffff, 0.6 );
    dLight.position.set(-1,-1,1);
    scene.add( dLight );

    var group = new THREE.Object3D();
    scene.add(group);

    var geometry = new THREE.BoxGeometry(0.5,0.5,0.5);
    var material = new THREE.MeshNormalMaterial();
    var cube = new THREE.Mesh(geometry, material);
    group.add(cube);

    var loader = new THREE.LegacyJSONLoader();
    var pumpkin;
    loader.load( "models/pumpkin.js", function( geometry, materials ) {
      pumpkin = new THREE.Mesh( geometry, materials );
      pumpkin.scale.set(.3,.3,.3);
      pumpkin.visible = false;
      group.add( pumpkin );
    });

    function render() {
      requestAnimationFrame(render);
      
      var delta = clock.getDelta();
      group.rotation.x += 3.2 * delta;
      group.rotation.y += 3.2 * delta;
      
      var time = clock.getElapsedTime() * 3;
      group.position.x = Math.cos( time ) * 2;
      group.position.y = Math.sin( time ) * 2 - 0.4;
      
      renderer.render(scene, camera);
    }
    
    render();


    // --------

    var step = 1;

    function applyStep(step) {
      // console.log(step);
      
      if   (step == 2) {
        cube.visible = true;
        pumpkin.visible = false;
      }
      else if   (step == 3) {
        cube.visible = false;
        pumpkin.visible = true;
      }
    }

    onmessage = function(e) {
      // paused = (e.data == 'pause' || e.data == 'slide:stop');
      step = e.data.director.args[0];
      applyStep( step );
    };

    function forward() {
      step++;
      if (step > 4) { step = 4; return; }
      applyStep(step);
    }

    function back() {
      step--;
      if (step <= 0) { step = 1; return; }
      applyStep(step);
    }

    // Controls for stand-alone
    window.addEventListener('keydown', function (e) {
      if (e.keyCode == 38 || e.keyCode == 37) back();
      if (e.keyCode == 40 || e.keyCode == 39) forward();
    });
  </script>
</body>
</html>